<template>
  <div class="shadow-wrapper" v-if="visible" @click.stop ref="mask">
    <!-- 遮罩层 -->
    <div class="dialog-wrapper">
      <!-- 对话框 -->
      <div class="info-wrapper">
        <!-- 对话框内容部分 -->
        <img
          class="icon"
          :src="require(`../common/images/${icon}-circle.png`)"
        />
        <div class="text">{{ info }}</div>
      </div>
      <div class="btn-wrapper">
        <!-- 对话框按钮部分 -->
        <div class="btn" @click="onCancel">{{ cancelText }}</div>
        <div class="btn" @click="onOk">{{ okText }}</div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: {
    mask: {
      /* 控制遮罩 */ type: Boolean,
      default: false,
    },
    icon: {
      /* 图标类型 */ type: String,
      default: "info",
    },
    info: {
      /* 文字内容 */ type: String,
      default: "内容",
    },
    cancelText: {
      /* 取消按钮文字 */ type: String,
      default: "",
    },
    okText: {
      /* 确认按钮文字 */ type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: true /* 控制对话框显示 */,
    };
  },
  mounted() {
    setTimeout(() => {
      /* 确保能获取到mask修改其背景属性 */
      if (this.mask) {
        this.$refs.mask.style.background = "rgba(0,0,0,.3)";
      }
    }, 20);
  },
  methods: {
    show() {
      /* 打开对话框 */
      this.visible = true;
    },
    hidden() {
      /* 关闭对话框 */
      this.visible = false;
    },
    onCancel() {
      /* 点击取消 */
      this.$emit("cancel");
      this.hidden();
    },
    onOk() {
      /* 点击确认 */
      this.$emit("ok");
      this.hidden();
    },
  },
};
</script>